
<template>
 <!-- 轮播图下面的商品信息 -->
 <section>
   <div class="goods">
    <p class="title">{{detaillist.productName}}</p>
    <p class="price">￥{{detaillist.currentPrice}}</p>
    <p class="priceId">商品编号{{detaillist.productId}}</p>
   </div>
   <div class="white"></div>
   <div class="Info" @click="openproduct">
     <span class="span-one">商品信息</span>
     <span class="span-two">查看</span>
   </div>
   <div class="detailproduct" :class="{'showactive':isActivenow}" >
     <span>暂无详细信息</span>
     </div>
   <div class="white-two"></div>
   <div class="active">
     <div class="out">
       <span class="redbox">活动</span>
       <b>新疆地区暂停发货</b>
     </div>
     <img src="../../assets/image/detail-go.png" alt="" class="detail-go">
   </div>
   <div class="sent">
     <img src="../../assets/image/detail-right.png" alt="">
     <span>4轮质检保障</span>
     <img src="../../assets/image/detail-right.png" alt="">
     <span>满100包邮</span>
   </div>
   <div class="color" style="width:100% height:9px background:#F9F9F9"></div>
   <div class="size">
     <span>请选择颜色尺码</span>
     <img src="../../assets/image/detail-go.png" alt="">
   </div>
   <div class="essay">
     <img src="../../assets/image/detail-essay.png" alt="">
     <b>该商品收藏在以下文章</b>
   </div>
   <div class="lookat"></div>
 </section>
</template>

<script>
import {createNamespacedHelpers}  from 'vuex'
const {mapState} =createNamespacedHelpers('detail')

export default {
  data(){
    return{
     isActivenow:false,
     num:1
    }
  },
 computed:{
   ...mapState(['detaillist'])
 },
  methods:{
    openproduct(){
      this.num++
      if(this.num % 2===0){
        this.isActivenow=true
      }else{
        this.isActivenow=false
      } 
    }
  }
}
</script>

<style lang="stylus" scoped>
 .goods{
   width 100%
   height 105px
   .title{
     font-size 15px
     font-family PingFang-SC-Medium
     margin-top 5px
     margin-left 14px
   }
   .price{
     font-size 19px
     color  #BB2741
     font-family PingFang-SC-Medium
     margin-top 10px
     margin-left 16px
   }
   .priceId{
     font-size 11px
     color #908F9F
     margin-top 8px
     margin-left 15px
   }
 }
 .white{
   width: 100%;
   height: 9px;
   background: #f4f4f4;
 }
 .Info{
   width 100%
   height 40px
   font-size 12px
   display flex
   align-items  center
   justify-content space-between
   .span-one{
     margin-left 14px
   }
   .span-two{
     margin-right 14px
     color #999
   }
 }
 .detailproduct{
   width 100%
   height 60px
   font-size 12px
   color #999
   display none 
   span{
     margin-left 15px
   }
 }
 .showactive{
   display block
 }
 .white-two{
    width: 100%;
   height: 9px;
   background: #f4f4f4;
 }
 .active{
   width 100%
   height 49px
   display flex
   align-items center
   justify-content space-between
   border-bottom 2px solid #f4f4f4
   .out{
     margin-top -13px
     margin-left 15px
     .redbox{
     display inline-block
     text-align center
     width 30px
     height 16px
     background #C32B23
     font-size 10px
     color #fff
     
   }
   b{
     margin-left 10px
     font-size 13px
     color #222
   }
   }
   .detail-go{
     width 7px
     height 12px
     margin-right 14px
   }
 }
 .sent{
   width 100%
   height 41px
   img{
     width 12px
     height 12px
     margin-top 10px
     margin-left 18px
   }
   span{
     font-size 11px
     color #9E9E9E
     margin-left 5px
     margin-top 10px
   }
 }
 .size{
   width 100%
   height 45px
   display flex
   justify-content space-between
   align-items center
   span {
     font-size 13px
     margin-left 13px
   }
   img{
     width 6px
     height 11px
     margin-right 17px
   }
 }
 .essay{
   width 100%
   height 48px
   display flex
   align-items center
   img {
     width 18px
     height 18px
     margin-left 13px
   }
   b{
     font-size 13px
     margin-left 10px
   }
 }
 .lookat{
   width 100%
   height 10px
   background #f4f4f4
 }
 
</style>
